<template>
    <a-layout>
        <a-layout-sider width="200" style="background: #fff">
            <a-menu
                    v-model:selectedKeys="selectedKeys2"
                    v-model:openKeys="openKeys"
                    mode="inline"
                    :style="{ height: '100%', borderRight: 0 }"
            >
                <a-sub-menu key="sub1">
                    <template #title>
              <span>
                <user-outlined />
                商家管理
              </span>
                    </template>
                    <a-menu-item key="1">option1</a-menu-item>
                    <a-menu-item key="2">option2</a-menu-item>
                    <a-menu-item key="3">option3</a-menu-item>
                    <a-menu-item key="4">option4</a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub2">
                    <template #title>
              <span>
                <laptop-outlined />
                商品管理
              </span>
                    </template>
                    <a-menu-item key="/admin/manager">
                        <router-link to="/admin/manager">品牌管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/specification">
                        <router-link to="/admin/specification">规格管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/typetemlate">
                        <router-link to="/admin/typetemlate">模板管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/item">
                        <router-link to="/admin/item">分类管理</router-link>
                    </a-menu-item>
                    <a-menu-item key="9">
                        商品审核
                    </a-menu-item>
                </a-sub-menu>
                <a-sub-menu key="sub3">
                    <template #title>
              <span>
                <notification-outlined />
                广告管理
              </span>
                    </template>
                    <a-menu-item key="/admin/contentcate">
                        <router-link to="/admin/contentcate">广告类别</router-link>
                    </a-menu-item>
                    <a-menu-item key="/admin/content">
                        <router-link to="/admin/content">广告内容</router-link>
                    </a-menu-item>
                </a-sub-menu>
            </a-menu>
        </a-layout-sider>
        <a-layout style="padding: 0 24px 24px">
            <a-layout-content
                    :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
            >
                <p>
                    <a-button type="primary" @click="add">新建</a-button>
                </p>

                <a-table :dataSource="contents"
                         :columns="columns"
                         :row-key="record=>record.id"
                         :pagination="pagination"
                         :loading="loading"
                         @change="handleTableChange">
                    <template #pic='{text,record,index}'>
                        <a-image :src="text" :width="100" :height="50"/>
                    </template>
                    <template #status='{text,record,index}'>
                        {{text==1?'有效':'无效'}}
                    </template>
                    <template v-slot:action="{text,record}">
                        <a-button type="primary"  @click="edit(record)">
                            编辑
                        </a-button>
                        <a-popconfirm
                                title="删除后无法恢复，确认删除?"
                                ok-text="是"
                                cancel-text="否"
                                @confirm="del(record.id)"
                        >
                            <a-button type="danger">
                                删除
                            </a-button>
                        </a-popconfirm>
                    </template>
                </a-table>
            </a-layout-content>
        </a-layout>
        <a-modal
                v-model:visible="modalVisible"
                title="编辑表单"
                :confirm-loading="modalLoading"
                @ok="handlModalOk"
                cancel-text="取消"
                ok-text="确定">

            <a-form :model="contentEntity" :label-col="{span:6}" :wrapper-col="wrapperCol">
                <a-form-item label="内容类目ID">
                    <a-select v-model:value="contentEntity.categoryId">
                        <a-select-option v-for="item in categoryList"
                                         :key="item.id"
                                         :value="item.id"
                        >
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="内容标题">
                    <a-input v-model:value="contentEntity.title" />
                </a-form-item>
                <a-form-item label="链接">
                    <a-input v-model:value="contentEntity.url" />
                </a-form-item>
                <a-form-item label="图片">
                    <a-upload
                            v-model:file-list="fileList"
                            name="file"
                            list-type="picture-card"
                            class="avatar-uploader"
                            :show-upload-list="true"
                            :action="action"
                            :before-upload="beforeUpload"
                            @change="handleChange"
                    >
                        <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                        <div v-else>
                            <loading-outlined v-if="loading"></loading-outlined>
                            <plus-outlined v-else></plus-outlined>
                            <div class="ant-upload-text">文件上传</div>
                        </div>
                    </a-upload>
                </a-form-item>
                <a-form-item label="排序">
                    <a-checkbox v-model:value="checked" v-model:checked="checked"></a-checkbox>
                </a-form-item>
                <a-form-item label="排序">
                    <a-input v-model:value="contentEntity.sortOrder" />
                </a-form-item>
            </a-form>
        </a-modal>
    </a-layout>
</template>


<script lang="ts">
    import {onMounted, ref} from "vue";
    import axios from "axios";
    import {message, UploadChangeParam} from "ant-design-vue";

    export default {
        name: "Content",
        setup(){
            const columns= [
                {
                    title: '内容id',
                    dataIndex: 'id',
                },
                {
                    title: '内容类目ID',
                    dataIndex: 'categoryId',
                },
                {
                    title: '内容标题',
                    dataIndex: 'title',
                },
                {
                    title: '链接',
                    dataIndex: 'url',
                },
                {
                    title: '图片',
                    dataIndex: 'pic',
                    slots: {customRender:'pic'}
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    slots: {customRender:'status'}
                },
                {
                    title: '排序',
                    dataIndex: 'sortOrder',
                },
                {
                    title: 'Action',
                    key: 'action',
                    slots: {customRender:'action'}
                },
            ];
            const pagination=ref({
                current:1,
                pageSize:4,
                total:0,
            });

            const loading = ref(false);
            const modalVisible = ref<boolean>(false);
            const modalLoading = ref<boolean>(false);
            const contents=ref();
            const contentEntity=ref();
            const categoryList=ref();
            const checked =ref(false);

            //数据查询
            const handleQuery=(params:any)=>{
                loading.value=true;
                axios.get('http://localhost:8887/listByPage',{
                    params:{
                        page:params.page,
                        size:params.size,
                    }
                }).then((response)=>{
                    loading.value=false;
                    contents.value=response.data.list;
                    //重置分页按钮
                    pagination.value.current=params.page;
                    pagination.value.total=response.data.total;
                })
            };
            //点中分页导航
            const handleTableChange=(pagination:any)=>{
                handleQuery({
                    page:pagination.current,
                    size:pagination.size
                })
            };
            //修改
            const handlModalOk=()=>{
                contentEntity.value.status=(checked.value?'1':'0');
                axios.post('http://localhost:8887/update',contentEntity.value).then((response)=>{
                    loading.value=false;
                    modalVisible.value=false;
                    handleQuery({
                        page:pagination.value.current,
                        size:pagination.value.pageSize
                    });
                })
            }
            const add =() =>{
                modalVisible.value =true;
                contentEntity.value ={
                };
            };
            //删除
            const del=(id:number)=>{
                axios.delete('http://localhost:8887/delete/'+id).then(response=>{
                    if (response.data.success==true){
                        message.success('删除成功');
                        //加载最新数据
                        handleQuery({
                            page:pagination.value.current,
                            size:pagination.value.pageSize
                        });
                    } else {
                        message.error(response.data.message);
                    }
                })
            };
            const edit =(record:any) =>{

                console.log(record.id);

            };
            const handleQueryCategory=()=>{
                axios.get('http://localhost:8887/findAllcate').then(response=>{
                    categoryList.value=response.data;
                });
            };
            onMounted(()=>{
                handleQuery({
                    page:1,
                    size:pagination.value.pageSize,
                });
                handleQueryCategory();
            });
            //以下是文件上传
            const fileList = ref([]);
            const imageUrl = ref<string>('');
            const action = ref('http://localhost:8887/uploadFile');
            //以下是两个回调函数
            const handleChange = (info: UploadChangeParam) => {
                if (info.file.status === 'uploading') {
                    loading.value = true;
                    return;
                }
                if (info.file.status === 'done') {
                    loading.value = false;
                    //console.log("上传文件code：" + info.file.response.message);
                    if (info.file.response!=null) {
                        // imageUrl.value = info.file.response.message;
                        //获取回调回来的图片的url，最后保存到mysql
                        contentEntity.value.pic = info.file.response;
                    }
                }
                if (info.file.status === 'error') {
                    loading.value = false;
                    message.error('upload error');
                }
            };

            const beforeUpload = (file: File) => {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    message.error('You can only upload JPG file!');
                }
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isLt2M) {
                    message.error('Image must smaller than 5MB!');
                }
                return isJpgOrPng && isLt2M;
            };
            return{
                columns,
                pagination,
                loading,
                modalVisible,
                modalLoading,
                contents,
                contentEntity,
                categoryList,
                checked,
                handleQuery,
                handleTableChange,
                handlModalOk,
                add,
                del,
                edit,
                handleQueryCategory,
                fileList,
                imageUrl,
                action,
                handleChange,
                beforeUpload,
            }
        }

    }
</script>

<style scoped>

</style>